// xc/components/pro/group.js
var basicBehavior = require('../behavior/basic')

Component({
  options: {
    addGlobalClass: true,
    multipleSlots: true
  },
  /**
   * 组件的属性列表
   */
  behaviors: [basicBehavior],
  properties: {
    gutter: { //空隙
      type: [Number, String],
      value: 0,
      default: true
    },
    columns: { //列数
      type: [Number, String],
      value: 1,
      default: true
    },
    aboutrows: { //简介行数
      type: Number,
      value: 1
    },
    titlrows: { //标题行数
      type: Number,
      value: 2
    },
    isshowabout: { //是否显示简介
      type: Boolean,
      value: false
    },
    aboutcolor: { //简介颜色
      type: String,
      value: "#999999"
    },
    scaleh: { //高度相对宽度放大
      type: [Number, String],
      value: 0,
      default: true
    },
    top: { //上部距离
      type: [Number, String],
      value: 5,
      default: true
    },
    bottom: { //底部距离
      type: [Number, String],
      value: 10,
      default: true
    },
    customClass: { //样式
      type: String,
      value: "xcthemvl"
    },


    customLeftStyle: { //左边图片部分样式
      type: String,
      value: ""
    },
    customLeftClass: { //左边图片class
      type: String,
      value: ""
    },
    customStyle: { //整个模块样式
      type: String,
      value: ""
    },
    customImgStyle: { //主图样式
      type: String,
      value: ""
    },
    customSimgStyle: { //小图样式
      type: String,
      value: ""
    },
    customMainStyle: { //主模块样式
      type: String,
      value: ""
    },
    customItemStyle: { //一个小单元样式
      type: String,
      value: ""
    },
    customBuyStyle: { //快递购买样式
      type: String,
      value: ""
    },
    customBuyimg: { //快递购买样式
      type: String,
      value: "add"
    },
    customTitleStyle: { //标签样式
      type: String,
      value: ""
    },
    customAboutStyle: { //关于我们样式
      type: String,
      value: ""
    },
    customRealpriceStyle: { //销售价格样式
      type: String,
      value: ""
    },
    customPriceStyle: { //划线价样式
      type: String,
      value: ""
    },
    mode: { //模式
      type: String, //排列方式
      value: "col" //row  col 
    },
    simgshow: { //是否显示小图
      type: Boolean,
      value: true
    },
    simgnum: { //小图数量
      type: Number,
      value: 2
    },
    simgscaleh: { //小图宽高比例
      type: Number,
      value: 1
    },
    btnshow: { //是否显示按钮
      type: Boolean,
      value: true
    },
    btntype: { //按钮类型 default默认 custom自定义
      type: String,
      value: "default"
    },
    attrimgsize: {
      type: Number,
      value: 50
    },

    modellist: {
      type: Array,
      value: []
    },
    linkurl: {
      type: String,
      value: ""
    },
    linkpara: {
      type: String,
      value: "id"
    },
    themcolor: {
      type: Object,
      value: {}
    }
  },
  lifetimes: {
    attached() {
      this.loadsys()
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    width: 0,
    // width:
    itemstyle: "",
    imgstyle: "",
    noheigeitemstyle: ""
  },

  /**
   * 组件的方法列表
   */
  methods: {

    loadsys(times) {
      var app = getApp();
      var windowWidth = app.globalData.sysinfo.windowWidth
      var that = this
      const query = this.createSelectorQuery()
      times++;
      query.selectAll('.xcl_pro_list').boundingClientRect(function (res) {

        that.data.width = res[0].width

        that.computewh()

      }).exec()
    },
    navigateTo(ev) {
      this.myBehaviorMethod()
      var app = getApp();
      var dataset = ev.currentTarget.dataset
      // app.xc_sys_config.router.navigateTo("/xc_lshop/shop/pro/proinfo?id=1")
      this._navigateTo(this.data.linkurl, dataset.item, this.data.linkpara)
    },
    computewh() {


      var width = this.data.width;

      var gutter = this.data.gutter
      var columns = this.data.columns
      var scaleh = this.data.scaleh
      // var bottom = this.data.bottom
      // var top = this.data.top
      var simgnum = this.data.simgnum
      var simgscaleh = this.data.simgscaleh

      var updatemodel = {};
      var w = (width - gutter) / columns

      var h = w * scaleh
      var simgw = (w - 10 - simgnum * 5) / (simgnum + 1)
      var simgh = simgw * simgscaleh

      if (this.data.mode == "row") {
        var gutters = this.data.gutter / 2
        updatemodel["customItemStyle"] = "margin-left: " + gutters + "px;margin-right:" + gutters + "px;";
      }
      console.log(this.data.mode)  
      updatemodel["customLeftStyle"] = "";
      updatemodel["customSimgStyle"] = "";
      updatemodel["customStyle"] = "width:" + width + 'px;';


      if (!this.data.mode) {
        this.data.mode = 'col';
      }


      if (this.data.mode == "col") {
        updatemodel["customSimgStyle"] = "width: " + simgw + "px;height:" + simgh + "px;";

        updatemodel["customItemStyle"] = "width: " + w + "px;";
        updatemodel["noheigeitemstyle"] = "width: " + w + "px;height: " + 0 + "px;"
        //  updatemodel["customItemStyle"] +="flex-flow: column;";
        updatemodel["customLeftStyle"] = updatemodel["customLeftStyle"] + ";width: " + w + "px;height: " + h + "px;"
        updatemodel["customMainStyle"] = "height:calc(100% - " + h + "px)";
      } else {
        console.log("this.data.customImgStyle")
        console.log(this.data.customImgStyle)
        // updatemodel["customSimgStyle"] = "width: 80px;height:" + 80 * scaleh + "px;";
        // var w=80;

        updatemodel["customLeftStyle"] = "width: "+ w +"px;height:" + w * scaleh + "px;";

        // updatemodel["customLeftStyle"] = "width: 80px;height:" + 80 * scaleh + "px;";
      }
      updatemodel["customItemStyle"] = this.data.customItemStyle + updatemodel["customItemStyle"];
      updatemodel["customSimgStyle"] = this.data.customSimgStyle + updatemodel["customSimgStyle"];
   

      this.setData(updatemodel)
      // gutter columns scaleh bottom
    },
    buy(ev) {
      var dataset = ev.currentTarget;
      console.log("dataset")

      console.log(dataset)
      this.triggerEvent('buy', dataset)
    },
    // groupbuy
  }
})